<template>
  <div :class="[ ...classes ]" :style="styleses">
    <div class="digit-grid-container">
      <div v-for="(item, index) in titles" :key="index" class="digit-container">
        <section class="digit-left" :style="digitLeftStyle">
          <img :src="item.url" :style="imgStyle">
        </section>
        <section class="digit-right">
          <div class="digit-title" :style="digitTitleStyle">
            {{item.title}}
          </div>
          <span class="bottom-digit" :style="bottomDigitStyle">{{item.bottom}}</span>
          <span class="up-digit" :style="bottomDigitStyle">{{item.up}}</span>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import titlemixins from '@/mixins/bigScreen/titlemixins'
export default {
  name: 'PowerNum',
  mixins: [titlemixins],
  data() {
    return {
      titles: [
        {
          title: '用电量 · kWh',
          bottom: 88888888,
          up: 1368,
          url: require('@/assets/linglong/img_yongdianliang.png')
        },
        {
          title: '供气量 · T',
          bottom: 888888,
          up: 1565,
          url: require('@/assets/linglong/img_gongqiliang.png')
        },
        {
          title: '煤耗量 · T',
          bottom: 888888,
          up: 238,
          url: require('@/assets/linglong/img_meihaoliang.png')
        },
        {
          title: '供暖量 · T',
          bottom: 88888888,
          up: 999,
          url: require('@/assets/linglong/img_gongnuanliang.png')
        },
        {
          title: '用水量 · T',
          bottom: 888888,
          up: 124,
          url: require('@/assets/linglong/img_yongshuiliang.png')
        },
        {
          title: '碳排放 · T',
          bottom: 888888,
          up: 325,
          url: require('@/assets/linglong/img_tanpaifang.png')
        }
      ]
    }
  },
  computed: {
    digitLeftStyle() {
      return {
        marginRight: this.$root.setting.scale * 19 + 'px',
        width: this.$root.setting.scale * 80 + 'px'
      }
    },
    digitTitleStyle() {
      return {
        fontSize: this.$root.setting.scale * 30 + 'px',
        fontWeight: this.$root.setting.scale * 400
      }
    },
    imgStyle() {
      return {
        width: this.$root.setting.scale * 80 + 'px',
        height: this.$root.setting.scale * 80 + 'px'
      }
    },
    bottomDigitStyle() {
      return {
        fontSize: this.$root.setting.scale * 70 + 'px'
      }
    }
  }
}
</script>

<style scoped>
.digit-grid-container {
  width: 100%;
  height: inherit;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.digit-container {
  position: relative;
  display: flex;
  width: 30%;
  min-width: 30%;
  max-width: 30%;
}
.digit-container .digit-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*margin-right: 19px;*/
  /*width: 80px;*/
}
.digit-container .digit-left img{
  border: 1px dashed;
}
.digit-container .digit-right {
  position: relative;
}
.digit-container .digit-right .digit-title {
  /*font-size:30px;*/
  font-family:FZLanTingHei-M-GBK;
  /*font-weight:400;*/
  color:rgba(160,200,219,1);
}
.digit-container .digit-right .bottom-digit {
  font-family:DS-Digital;
  /*font-size:70px;*/
  font-weight:bold;
  color:rgba(9,35,75,1);
}
.digit-container .digit-right .up-digit {
  font-family:DS-Digital;
  /*font-size:70px;*/
  position: absolute;
  font-weight:bold;
  color:rgba(255,255,255,1);
  right: 0;
}
</style>
